<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Laptops Page</title>
<meta name="author" content="Krasimira Stanislavova-Yontceva">
<meta name="description" content="Homework4, Task4">
<meta name="keywords" content="html, html5, tags">
	<style type="text/css">	
		.table0{border:0px}
		.table1{border:1px solid #000000}	
		.table2{border:0px}
		.table3{border:0px}
		.table4{border:0px}
		.table5{border:0px}
		.table6{border:0px}
		.table7{border:0px}
		.table8{border:0px}
		h2 {text-align:center}		
		legend{text-align:center}		
	</style>
</head>
<body>
	<form>
		<p>
			<h2 class = "h2">
			<a href="http://www.apple.com/bg/">Apple</a>			
			<a href="http://www.toshiba.bg/">Toshiba</a>			
			<a href="http://www.lenovoonline.bg/les/home.nsf?Open">Lenovo</a>
			<a href="http://www.dell.bg/">Dell</a>			
			<a href="http://www.asus.com/">Asus</a>			
			<a href="http://www.acer.bg/ac/bg/BG/content/home">Acer</a>
			<a href="http://www8.hp.com/bg/bg/home.html">HP</a>			
			</h2>
		</p>
	<hr>
		<table class="table0" cellspacing="0" cellpadding="5" >
			<tr>
				<td>
					<table class="table1" cellspacing="0" cellpadding="5" >
						<tr>
							<td colspan="2">
								<fieldset >
									<legend>Acer-Aspire</legend>
										<table class="table2" border = "0">
											<tr>
												<th rowspan="3"><input type="image" src="Acer-Aspire-1.jpg" name="Acer-Aspire-1" align="top"  width="150px" alt="image" />
												</th>
												<td colspan = "1" rowspan="1"><br></td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">64GB SSD</td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">2GB DDR</td>
											</tr>								
											<tr>
												<td colspan = "1" rowspan="1">1300 USD</td>
												<td colspan = "1" rowspan="1">Intel Core i5</td>	
											</tr>
										</table>
								</fieldset>
							</td>
							<td colspan="2">
								<fieldset >
									<legend>Acer-Aspire</legend>
										<table class="table3" border = "0">
											<tr>
												<th rowspan="3"><input type="image" src="Acer-Aspire-4.jpg" name="Acer-Aspire-4" align="top"  width="150px" alt="image" />
												</th>
												<td colspan = "1" rowspan="1"><br></td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">64GB SSD</td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">2GB DDR</td>
											</tr>								
											<tr>
												<td colspan = "1" rowspan="1">1300 USD</td>
												<td colspan = "1" rowspan="1">Intel Core i5</td>	
											</tr>
										</table>
								</fieldset>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<fieldset >
									<legend>Acer-Aspire</legend>
										<table class="table4" border = "0">
											<tr>
												<th rowspan="3"><input type="image" src="Acer-Aspire-2.jpg" name="Acer-Aspire-2" align="top"  width="150px" alt="image" />
												</th>
												<td colspan = "1" rowspan="1"><br></td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">64GB SSD</td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">2GB DDR</td>
											</tr>								
											<tr>
												<td colspan = "1" rowspan="1">1300 USD</td>
												<td colspan = "1" rowspan="1">Intel Core i5</td>	
											</tr>
										</table>
								</fieldset>
							</td>
							<td colspan="2">
								<fieldset >
									<legend>Acer-Aspire</legend>
										<table class="table5" border = "0">
											<tr>
												<th rowspan="3"><input type="image" src="Acer-Aspire-6.jpg" name="Acer-Aspire-6" align="top"  width="150px" alt="image" />
												</th>
												<td colspan = "1" rowspan="1"><br></td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">64GB SSD</td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">2GB DDR</td>
											</tr>								
											<tr>
												<td colspan = "1" rowspan="1">1300 USD</td>
												<td colspan = "1" rowspan="1">Intel Core i5</td>	
											</tr>
										</table>
								</fieldset>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<fieldset >
									<legend>Acer-Aspire</legend>
										<table class="table6" border = "0">
											<tr>
												<th rowspan="3"><input type="image" src="Acer-Aspire-3.jpg" name="Acer-Aspire-3" align="top"  width="150px" alt="image" />
												</th>
												<td colspan = "1" rowspan="1"><br></td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">64GB SSD</td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">2GB DDR</td>
											</tr>								
											<tr>
												<td colspan = "1" rowspan="1">1300 USD</td>
												<td colspan = "1" rowspan="1">Intel Core i5</td>	
											</tr>
										</table>
								</fieldset>
							</td>
							<td colspan="2">
								<fieldset >
									<legend>Acer-Aspire</legend>
										<table class="table7" border = "0">
											<tr>
												<th rowspan="3"><input type="image" src="Acer-Aspire-5.jpg" name="Acer-Aspire-5" align="top"  width="150px" alt="image" />
												</th>
												<td colspan = "1" rowspan="1"><br></td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">64GB SSD</td>
											</tr>
											<tr>
												<td colspan = "1" rowspan="1">2GB DDR</td>
											</tr>								
											<tr>
												<td colspan = "1" rowspan="1">1300 USD</td>
												<td colspan = "1" rowspan="1">Intel Core i5</td>	
											</tr>
										</table>
								</fieldset>
							</td>
						</tr>
					</table>
				</td>	
				<td>
					<table class="table8">			
						<tr>
							<td>
								<label for="slider500USD">Min price:</label>
							</td>
							<td>
								<br>
								<br>
								<br>
							</td>
							<td>
								<label for="slider500USD">500 USD</label>
							</td>
						</tr>	
						<tr>
							<td colspan="3">
								<input id="slider500USD" type="range" min="0" max="500" value="250" onchange="change price('slider')"/>
							</td>
						</tr>	
						<tr>
							<td>
								<label for="slider1500USD">Max price:</label>
							</td>
							<td>
								<br>
								<br>
								<br>
							</td>
							<td>
								<label for="slider1500USD">1500 USD</label>
							</td>
						</tr>	
						<tr>
							<td colspan="3">
								<input id="slider1500USD" type="range" min="0" max="1500" value="750" onchange="change price('slider')"/>
							</td>
						</tr>
						<tr>
							<td>
								<label for="slider4GB">Min RAM:</label>
							</td>
							<td>
								<br>
								<br>
								<br>
							</td>
							<td>
								<label for="slider4GB">4 GB</label>
							</td>
						</tr>	
						<tr>
							<td colspan="3">
								<input id="slider4GB" type="range" min="0" max="4" value="2" onchange="change GB('slider')"/>
							</td>
						</tr>
						<tr>
							<td>
								<label for="slider16GB">Max RAM:</label>
							</td>
							<td>
								<br>
								<br>
								<br>
							</td>
							<td>
								<label for="slider16GB">16GB</label>
							</td>
						</tr>	
						<tr>
							<td colspan="3">
								<input id="slider16GB" type="range" min="0" max="16" value="8" onchange="change GB('slider')"/>
							</td>
						</tr>						
					</table>
				</td>	
			</tr>
		</table>	
	</form>
</body>
</html>